<template>
    <div>
        <el-form label-width="100px" >
            <el-form-item label="模块标题：">
                <el-input v-model="active_component.propValue.name" clearable disabled></el-input>
            </el-form-item>
            <el-form-item label="模块样式：">
                <div class="flex-around jz_box">
                    <div
                        class="jz-photo-group"
                        :class="active_component.propValue.tabIndex == 0 ? 'group_active' : ''"
                        @click="changetab(0)"
                        >
                        <div class="jz_style_img_0 jz_style_img"></div>
                    </div>
                    <div
                        class="jz-photo-group"
                        :class="active_component.propValue.tabIndex == 1 ? 'group_active' : ''"
                        @click="changetab(1)"
                        >
                        <div class="jz_style_img_1 jz_style_img"></div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="图册配置：">
                <div v-for="(item,i) of active_component.propValue.imgList" :key="i">
                    <img style="width:100px;height:auto;object-fit:cover;" :src="item.img" alt="">
                    <el-input v-model="item.img"></el-input>
                    <div class="flex describe">
                        <div>标题:</div>
                        <el-input style="width:200px;margin-left:10px" v-model="item.title"></el-input>
                        <div style="margin-left:40px">内容:</div>
                        <el-input style="width:200px;margin-left:10px" v-model="item.content"></el-input>
                    </div>
                    <div class="flex">
                        <Upload :text="'上传图片'" @confrim="(e)=>{confrim(e,i)}" :type="'primary'"></Upload>
                        <el-button type="danger" icon="el-icon-delete" class="rightmargin" @click="deletephoto(i)">删除图片</el-button>
                    </div>
                </div>
            </el-form-item>
            <el-button @click="addItem" size="mini" type="primary" class="additem">新增</el-button>
            <el-form-item label="图片尺寸：">
                <div class="flex">
                    <div>宽度(px)
                        <el-input  style="width:100px"  v-model="active_component.propValue.boxwidth" placeholder="请输入宽度"></el-input>
                    </div>
                    <div style="margin-left: 10px;">高度(px)
                        <el-input style="width:100px;" v-model="active_component.propValue.boxheight" placeholder="请输入高度"></el-input>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="是否内嵌：">
                <el-radio-group v-model="active_component.propValue.textType">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="flex-center" style="margin-top:10px;">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushcanvas">确定</el-button>
        </div>
    </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import Upload  from "../Upload/index.vue";
export default {
    props: ["componentId", "componentList","activeCompont"],
    components: {Upload},
    data() {
        return {
            radio: '',
            tabIndex: 0,
            active_component: {},
            activeNames: ['1']
        }
    },
    created() {
        if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.value == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
      }
    }
    }
    },
    methods: {
        // 点击删除图片
        deletephoto(i) {
            console.log(i);
            this.active_component.propValue.imgList.splice(i,1)
        },
        // 点击新增图片
        addItem(){
            this.active_component.propValue.imgList.push({
                img:'',
                text:''
            })
        },
        confrim(e,i){
            console.log(e);
            this.active_component.propValue.imgList[i].img=e
        },
        closeTK(){
            this.$emit("closeTK")
        },
        changetab(i) {
            console.log(i);
            this.active_component.propValue.tabIndex = i;
        },
        pushcanvas() {
            if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
                this.$emit("closeTK")//关闭弹框
            }else{
                let canvasStyle = this.$store.state.canvasStyleData;
                let component = this.active_component;
                component.style.top = Number(canvasStyle.height);
                component.style.left = 600;
                this.$store.commit("addComponent", { component: component });
                canvasStyle.height = String(
                    Number(canvasStyle.height) + Number(component.style.height)
                );
                this.$store.commit("setCanvasStyle", canvasStyle);
                this.$emit("closeTK")//关闭弹框
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.additem {
    margin-left: 100px;
}
.describe {
    margin: 10px 0;
}
.rightmargin {
    margin: 0 0 40px 47px;
}

.el-collapse {
    margin-left: 18px;
}
.el-collapse-item {
    margin-left: 0;
}

.jz_box {
    width: 200px;
}
.jz-photo-group {
    width: 64px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #aaa;
    .jz_style_img {
        width: 61px;
        height: 48px;
        background: url("../../assets/iconfont/mbg02.png") no-repeat;
    }
    .jz_style_img_0 {
        background-position: 0px -471px;
    }
    .jz_style_img_1 {
        background-position: -314px -506px;
    }
}
.group_active {
    border: 1px solid #5874d8 !important;
    position: relative;
}
.group_active::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 24px;
    background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}
</style>
